<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/found.css"/>
		<title>团购分类</title>
	</head>
	<body>
		
		<div id="web">
			<!--头部-->
			<header class="clearfix">
				<!--logo-->
				<div class="back fl">
					<a href="Productdetails.html"><input type="button"  value="Back" /></a>
				</div>
				
				<div class="discover fl">发现</div>
				
				<div class="selettBar fr">
					<select name="">
						<option value="广州">广州市</option>
						<option value="深圳">深圳市</option>
					</select>
				</div>
			</header>
			
			<!--内容-->
			 
<div class="session">
	<!--搜索框-->
	<div class="search1">
		<input type="text" name="" id="" value="请输入商品名称"/>
		<img src="img/fangdajing.png" />
	</div>
	
	<div class="seek">
				
	 <div class="searching">
		<label>大家都在搜</label>
	 </div>
				
	 <div class="list">
		<div class="list1">
			<button>寿司</button>
			<button>羽毛球</button>
			<button>火锅</button>
			<button>游泳馆</button>
		</div>
	    <div class="list2">
		    <button>电影</button>
			<button>周黑鸭</button>
			<button>KTV</button>
			<button>肯德基</button>
		</div>
	 </div>
				
	</div>

	<!--热门搜索模块-->
	<div class="trend">
	<!--热门搜索-->
	  <div class="trend-pic fl">
		<img src="img/fire.png"/>
		&nbsp;
		<a href="#" class="fr">热门搜索</a>
	  </div>
	<!--更多-->
	  <div class="more fr">
		<a href="#" class="fl">更多</a>
		&nbsp;
		<img src="img/icon2.png">
	  </div>
	<div class="clear"></div>
	</div>
	
<!--图片列表展示-->
	<div class="photos">
					
	 <div class="photos1 fl">
		<img src="img/bread1.jpg"/>
	 </div>
					
	 <div class="photos2 fl">
		 <div class="photos2one">
			 <img src="img/bread2.jpg"/>
	     </div>
		 <div class="photos2two fl">
			 <img src="img/bread3.jpg"/>
		 </div>
	     <div class="photos2three fl">
			 <img src="img/bread4.jpg"/>
		 </div>
	</div>
	<div class="clear"></div>
</div>

<div class="trend">
	<!--热门搜索-->
	  <div class="trend-pic fl">
		<img src="img/stars.png"/>
		&nbsp;
		<a href="#" class="fr">推荐搜索</a>
	  </div>
	<!--更多-->
	  <div class="more fr">
		<a href="#" class="fl">更多</a>
		&nbsp;
		<img src="img/icon2.png">
	  </div>
	<div class="clear"></div>
	</div>
	
	<div class="recommend-search">
	    <img src="img/duck.jpg" class="duck"/>
		<img src="img/badminton.jpg" class="badminton"/>
		<img src="img/pofeng.jpg" class="pofeng"/>
	</div>
</div>	
			<!--底部-->
<footer>
	<ul class="clearfix">
	<li>
		<a href="index.html">
		<i class="iconfont icon-path"></i>
		<p>首页</p>
		</a>
	</li>
					
	<li>
	<a href="classification.html">
		<i class="iconfont icon-classify "></i>
		<p>分类</p>
		</a>
		</li>
					
	<li>
		<a href="found.html">
		<i class="iconfont icon-zhinanzhen active"></i>
		<p>发现</p>
		</a>
	</li>
					
	<li>
	<a href="my.html">
	<i class="iconfont icon-user"></i>
	<p>我的</p>
	</a>
	</li>
	</ul>
</footer>
</div>
		
		
		
		
		
		   <script>
    
        
		document.body.style.height = window.innerHeight + "px";
		
        /*动态改变根元素字体大小*/
        function recalc() {
            var clientWidth = document.documentElement.clientWidth;
            if(!clientWidth) return;
            document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
                                        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
        }

        function initRecalc() {
            recalc();
            var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
            if(!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        }
        initRecalc();
    
    
    
    </script>
	</body>
</html>
